<template>
	<!--"'mes_' + (messageList.length-1)"  -->
	<view class="fixed search top" style="z-index: 5;background-color: aliceblue;display: flex;align-items: center">
		<view class="action" @click="goback" style="z-index: 20;">
			<text class="cuIcon-back text-gray"></text>
		</view>
		<view class="center-content">
			<view class="top_right">
				<view class="cu-avatar round" :style="{ 'background-image': 'url(' + 'http://8.146.208.139:3000/avator/1708001868981.png' + ')' }"></view>
			</view>
			<view class="content" style="text-align: center;">
				科大讯飞
			</view>
		</view>
	</view>
	<scroll-view class="contain bg-white"  :scroll-into-view="'mes_' + (messageList.length - 1)" scroll-y="true" ref="contain" @scroll="inscroll">
		<view class="cu-chat" v-for="(item, index) in messageList" :id="`mes_${index}`" :key="index" ref="mesRef">
			<view class="cu-item self" v-if="item.type == 0">
				<view class="main">
					<view class="content light bg-cyan shadow">
						<text>{{ item.content }}</text>
					</view>
				</view>
				<view class="cu-avatar radius" :style="{ 'background-image': 'url(' + myavator + ')' }">
				</view>
				<view class="date">{{ item.time }}</view>
			</view>
			<view class="cu-item" v-else-if="item.type == 1">
				<view class="cu-avatar radius"
					style="background-image:url(http://8.146.208.139:3000/avator/1708001868981.png);">
				</view>
				<view class="main">
					<view class="content bg-blue light shadow">
						<text>{{ item.content }}</text>
					</view>
				</view>
				<view class="date "> {{ item.time }}</view>
			</view>
		</view>
	</scroll-view>
	<!-- 当没被点击的时候 -->
	<view class="foot cu-bar" style="display: flex;justify-content: space-evenly;">
		<input placeholder="" type="text" name="text" :adjust-position="true" cursor-spacing="15" class="input" v-model="msg">
		<button v-if="able" class="cu-btn bg-green shadow"  @click="sendMsg" style="margin-right:10px;display: inline-block;width: 5vw;display: flex;align-items: center;margin-left: 4px;">发送</button>
		<van-button loading type="success" v-else/>
	</view>
<!-- 	<view class="bott  {{InputBottom!=0?'cur':''}}" style="bottom:{{InputBottom}}px">
		<view class="cu-bar input foot">
			<input class="solid-bottom"  adjust-position="true"
				 maxlength="300" cursor-spacing="10" v-model="msg" />
			<button class="cu-btn bg-green shadow" @click="sendMsg">发送</button>
		</view>
	</view> -->
</template>
<style scoped lang="less">
@import url("../../static/chat_icon/iconfont.css");
.input {
  width: 30vw;
  height: 45px;
  padding: 12px;
  border-radius: 12px;
  border: 1.5px solid lightgrey;
  outline: none;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  box-shadow: 0px 0px 20px -18px;
}

.input:hover {
  border: 2px solid lightgrey;
  box-shadow: 0px 0px 20px -17px;
}

.input:active {
  transform: scale(0.95);
}

.input:focus {
  border: 2px solid grey;
}



.center-content {
	margin-left: -30px;
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.contain {
	height: 90vh !important;
	width: 35vw;
	padding-bottom: 10vh;
	padding-top: 5vh;
}


.cu-bar {
	width: 35vw;
}

@media screen and (min-width: 600px) {
	.cu-bar {
		width: 35vw;
	}
}

.top {
	padding-top: 2vh;
	height: 10vh;
	// line-height: 15vh;
	display: flex;
	align-items: center;
	width: 100%;
	// justify-content: space-between;
	// align-items: center;
	padding-left: 3vh;
	padding-right: 3vh;
}


.tools {
	width: 100%;
	height: 5vh;
	border: 1px solid black;
	position: absolute;
	bottom: 8vh;
	background-color: ghostwhite;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;

	// display: flex;
	.tool {
		height: 5vh;
		line-height: 5vh;
		margin-left: 5px;
		font-size: 40rpx;
	}
}

.invite {
	width: 70%;
	border-radius: 10%;
	background-color: aliceblue;
	// border: 1px solid black;
	margin: 10px auto;

	.title {
		width: 100%;
		text-align: center;
		font-weight: 700;
	}

	.content {
		margin: 10px auto;
		text-align: center;
		max-width: 70%;
	}

	.btns {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		margin-bottom: 7px;
	}
}
</style>
<script>
import { getuserInfo, chatToAi } from '@/store/api.js'
import { gettime } from '@/store/constants.js'
export default {
	data() {
		return {
			able:true,
			myavatar: '',
			scrollTop: 0,
			showList: false,
			InputBottom: 0,
			msg: '',
			scrollHeight:'',
			clientHeight:'',
			scrollTop:'',
			messageList: [{
				type: 1,
				content: '请问我有什么可以帮助你',
				time: this.formatDateTime(new Date().getTime())
			}]
		};
	},
	onLoad(value) {

	},
	mounted() {
		getuserInfo().then(res => {
			console.log(res)
			this.myavator = res.data.avatar
		})
	},
	methods: {
		inscroll(event) {
			uni.createSelectorQuery().in(this).select('.contain').fields({
				size: true,
				scrollOffset: true,
				scrollHeight: true,
				clientHeight: true,
			}, (rect) => {
				this.scrollHeight = rect.scrollHeight;
				this.clientHeight = rect.height;
			}).exec();
			this.scrollTop = event.detail.scrollTop;
		},
		ifbottom() {
			if (this.scrollHeight - this.scrollTop <= 1.5 * this.clientHeight) {
				// this.bot = `mes_${this.messageList.length-1}`
				setTimeout(() => {
					let contain = document.querySelector(`#mes_${this.messageList.length-1}`)
					if (contain != null) {
						contain.scrollIntoView(false, {
							behavior: "smooth"
						})
					}
				}, 0)
		
			}
		},
		goback() {
			this.ifclose = false
			uni.navigateBack()
		},
		formatDateTime(dateTimeString) {
			// 创建 Date 对象
			const dateTime = new Date(dateTimeString);
			// 提取年、月、日、时、分、秒
			const year = dateTime.getFullYear();
			const month = (dateTime.getMonth() + 1).toString().padStart(2,
				'0'); // 月份是从 0 开始的，所以需要加 1
			const day = dateTime.getDate().toString().padStart(2, '0');
			const hours = dateTime.getHours().toString().padStart(2, '0');
			const minutes = dateTime.getMinutes().toString().padStart(2, '0');
			const seconds = dateTime.getSeconds().toString().padStart(2, '0');
			// 构建所需的格式
			const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}`;
			return formattedDateTime;
		},
		sendMsg() {
			this.able=false
			this.messageList.push({
				type: 0,
				content: this.msg,
				time: this.formatDateTime(new Date().getTime())
			})
			this.ifbottom()
			let t=this.msg
			this.msg=''
			chatToAi(t).then(res => {
				console.log(res)
				this.messageList.push({
					type: 1,
					content: res.data.data.answer || res.data.data.msg,
					time: this.formatDateTime(new Date().getTime())
				})
				// console.log(res)
				this.ifbottom()
				this.able=true
			})
			
		}
	}
};
</script>